<link rel="stylesheet" href="/public/css/admin.css">

<div class="admin-container">
  <div class="admin-header">
    <h1 class="admin-title">User Management</h1>
    <div class="admin-navigation">
      <a href="/admin/products" class="admin-nav-link">Manage Products</a>
      <a href="/" class="admin-nav-link">Back to Home</a>
    </div>
  </div>

  <% if (users && users.length > 0) { %>
    <table class="admin-table">
      <thead>
        <tr>
          <th>ID</th>
          <th>Username</th>
          <th>Role</th>
          <th>Coins</th>
        </tr>
      </thead>
      <tbody>
        <% users.forEach(user => { %>
          <tr id="admin_user_<%= user.username %>">
            <td><%= user.id %></td>
            <td><%= user.username %></td>
            <td>
              <span class="user-role-<%= user.role %>"><%= user.role %></span>
            </td>
            <td><%= user.coin %> 🪙</td>
          </tr>
        <% }); %>
      </tbody>
    </table>
  <% } else { %>
    <div class="no-data-message">No users found in the database.</div>
  <% } %>
</div>